﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="shopcart.aspx.cs" Inherits="Mobile_New_shop" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>购物车</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=2.0,maximum-scale=1,user-scalable=no">

    <script type="text/javascript" src="js/index.js"></script>
    <link href="css/index.css" rel="stylesheet" />
    <style>
        body {
            background: #f0f0f0;
        }

        a:active {
            outline: hidden;
        }

        .header {
            width: 100%;
            height: 50px;
            line-height: 50px;
            position: fixed;
            top: 0px;
            border-bottom: 1px solid #eee;
            background: #000000;
            color: #fff;
            text-align: center;
            font-size: 18px;
        }

        .content { /*width: 100%;
				 overflow: hidden;padding-top: 51px;*/
            padding-bottom: 96px;
        }

        .middle {
            width: 100%;
            height: 110px;
            border-bottom: 1px solid #eeeeee;
            background: #fff;
        }

            .middle .middle_left {
                float: left;
                width: 15%;
                height: 110px;
            }

                .middle .middle_left img {
                    width: 18px;
                    padding-left: 15px;
                    height: 18px;
                    padding-top: 55px;
                }

            .middle .middle_middle {
                float: left;
                width: 40%;
                height: 110px;
            }

                .middle .middle_middle img {
                    width: 100px;
                    height: 100px;
                    padding: 5px 0px 2px 3px;
                }

            .middle .middle_right {
                float: left;
                width: 45%;
                height: 110px;
            }

                .middle .middle_right ul {
                    margin-right: 10px;
                }

                    .middle .middle_right ul li {
                        line-height: 25px;
                        text-align: right;
                        color: #515151;
                    }

                    .middle .middle_right ul .li_1 {
                        margin-top: 6px;
                    }

                        .middle .middle_right ul .li_1 span {
                            display: inline-block;
                            width: 30px;
                            height: 20px;
                            line-height: 20px;
                            text-align: center;
                            background: #f4f4f4;
                            border-radius: 6px;
                        }

                        .middle .middle_right ul .li_1 b {
                            font-size: 12px;
                            color: #474747;
                        }

                    .middle .middle_right ul font {
                        color: #8e8e8e;
                        font-size: 14px;
                        display: inline-block;
                        padding-top: 10px;
                    }

        .li_right {
            float: right;
        }

            .li_right img {
                width: 20px;
                height: 20px;
            }

        .ul_1 {
            margin-top: 12px;
        }

        .div_bottom {
            width: 100%;
            font-size: 14px;
            color: #434343;
            background: #F0F0F0;
        }

            .div_bottom li {
                float: left;
                width: 50%;
                height: 50px;
                line-height: 50px;
                background: #ffffff;
            }

        a, img, button, input, textarea {
            -webkit-tap-highlight-color: rgba(255,255,255,0);
        }

        .div_bottom li span {
            display: inline-block;
            float: right;
        }

        .span_p {
            color: #c34050;
        }

        .footer_bottom {
            width: 100%;
            height: 40px;
            position: fixed;
            left: 0px;
            bottom: 55px;
            color: #e4ebcc;
            z-index: 999;
        }

            .footer_bottom .div_left {
                height: 40px;
                line-height: 40px;
                float: left;
                width: 70%;
                background: #000;
            }

            .footer_bottom .div_right {
                height: 40px;
                line-height: 40px;
                background: #fc263e;
                text-align: center;
                float: left;
                width: 30%;
            }

                .footer_bottom .div_right .div_right_r {
                    width: 65px;
                    height: 40px;
                    line-height: 40px;
                    margin: 0 auto;
                }

                .footer_bottom .div_right span {
                    float: left;
                    font-size: 14px;
                    color: #fff;
                }

                .footer_bottom .div_right img {
                    width: 8px;
                    height: 10px;
                    float: left;
                    margin-top: 15px;
                    margin-left: 6px;
                }

            .footer_bottom .div_left img {
                width: 18px;
                height: 18px;
                padding-left: 12px;
                padding-right: 6px;
            }

            .footer_bottom .div_left table {
                display: inline-block;
                width: 35%;
                float: left;
            }

            .footer_bottom .div_left ul {
                width: 65%;
                float: left;
            }

                .footer_bottom .div_left ul li {
                    line-height: 20px;
                }

            .footer_bottom .div_left .li_top {
                font-size: 15px !important;
                margin-top: 13px;
            }

            .footer_bottom .div_left .li_bottom {
                font-size: 2px !important;
            }

        .bottom_details li {
            width: 100%;
            height: 45px;
            background: white;
            border: none;
        }

        .huise {
            width: 100%;
            height: 6px;
            background: #e3e3e3;
        }

        .huise123 {
            width: 100%;
            border: 1px solid #e3e3e3;
        }

        font {
            color: #eb9ca2;
        }

        .member_info li {
            width: 100%;
            height: 45px;
            background: white;
        }

        .member_info .info_left {
            width: 44%;
            float: left;
            height: 45px;
            line-height: 45px;
            padding-left: 3%;
            color: #aaa;
        }

        .member_info .info_right {
            width: 50%;
            height: 45px;
            line-height: 45px;
            padding-right: 3%;
            float: right;
            color: #aaa;
            text-align: right;
        }

            .member_info .info_right img {
                height: 11px;
                padding-left: 3px;
            }

            .member_info .info_right .mgs_1 {
                width: 10px;
                height: 8px;
                padding-left: 3px;
            }

        .tab_top {
            width: 100%;
            height: 30px;
            background: #fef9e3;
        }

            .tab_top tr {
                line-height: 24px;
            }

            .tab_top table {
                padding-left: 15px;
            }

            .tab_top .tb1_td2 {
                display: inline-block;
                width: 40px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                border-radius: 4px;
                background: #FC263E;
                color: #fff;
                margin-top: 2px;
            }

            .tab_top .tb1_td3 {
                padding-left: 10px;
            }

        .bottom_details span {
            font-size: 15px;
            color: #313131;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div style="text-align: center; font-size: 12px; display: none;" runat="server" id="msg">
            <img src="../images/sc.png" style="width: 30%; margin-top: 150px;" /><br />
            <br />
            <span id="msgText" style="font-size: 18px; color: #aaa;">购物车中暂无商品</span></div>
        <div id="shopping_car_background">
            <div class="content">
                <div class="content_1" id="content_1">
                    <asp:Repeater runat="server" ID="rptGoodsCard">
                        <ItemTemplate>
                            <div class='middle' id="pric_<%#Eval("GoodsID") %>">
                                <div class='middle_left' data-check='1'onclick="danxuan(this);">
                                    <img src='images/ic_address_selected.png'  data-id="<%#Eval("GoodsID") %>" data-money="<%#Convert.ToDecimal(Eval("Price")).ToString("0.00")%>"  />
                                </div>
                                <div class='middle_middle'>
                                    <img src='<%#Eval("img") %>' onerror="javascript:this.src='../../images/Gift/nogift.jpg'" />
                                </div>
                                <div class='middle_right'>
                                    <ul>
                                        <li>
                                  
                                            <font><%#Eval("Name")%></font>
                                        </li>
                                        <li class='li_1'>
                                            ￥<b id="sumpric_<%#Eval("GoodsID") %>"><%#Convert.ToDecimal(Eval("Subtotal")).ToString("0.00")%></b>
                                        </li>
                                    </ul>
                                    <ul class='ul_1'>
                                        <li class='li_right'>
                                            <img src='images/btn_add_to_shopping_cart_normal.png' onclick="index_changenum('<%#Eval("GoodsID") %>','+','<%#Convert.ToDecimal(Eval("Price")).ToString("0.00")%>');" />
                                        </li>
                                        <li class='li_right'>
                                            <input id='text_box_<%#Eval("GoodsID") %>' name='' type='text' value='<%#Eval("ConvertNumber") %>' class="number" style='margin-top: -6px; font-size: 16px; width: 50px; text-align: center; border: none; text-shadow: none; outline: none;' />
                                        </li>
                                        <li class='li_right'>
                                            <img src='images/btn_reduce_from_shopping_cart_normal.png' onclick="index_changenum('<%#Eval("GoodsID") %>','-','<%#Convert.ToDecimal(Eval("Price")).ToString("0.00")%>');" />
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </ItemTemplate>
                    </asp:Repeater>

                </div>

            </div>
            <div class="footer_bottom" style="display:none" runat="server" id="foot">
                <div class="div_left">
                    <table>
                        <tr >
                            <td class="tb1_td1">
                                <img class="pic"  onclick="alls(this)"  src="images/ic_address_selected.png" /></td>
                            <td class="tb1_td1">全选</td>
                        </tr>
                    </table>
                    <ul>
                        <li class="li_top">支付价<span id="zhifu_price" runat="server"></span>
                        </li>
                        <!--<li class="li_bottom">可使用优惠券减50.0免邮费</li>-->
                    </ul>
                </div>
                <div class="div_right">
                    <a onclick="pay()">
                        <div class="div_right_r">
                            <span>去结算</span>
                            <img src="images/icon_detail_right.png" onclick="" />
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="a_footer" id="footer">
            <ul>
            <a href="GoodsList.aspx">
                <li class="ico1">
                    <span>首页</span>
                </li>
            </a>
            <a href="#">
                <li class="ico3ed">
                    <span>购物车</span>
                </li>
            </a>
               <a href="MyOrder.aspx">
                    <li class="ico5">
                        <span>订单</span>
                    </li>
                </a>
                <%-- <a href="Default.aspx?pageid=shangjiaxiangqing">
                    <li class="ico7">
                        <span>商家公告</span>
                    </li>
                </a>--%>
            </ul>
        </div>
    </form>
    <script type="text/javascript" src="../New//js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../New/swiper/js/swiper-3.3.1.min.js"></script>
    <script type="text/javascript" src="../New/js/xxl.base.js"></script>
    <script src="js/GoodsList.js"></script>
    <script>
        function alls(_this) {
      
       
            var mypic = $(".middle_left").children("img");
            if ($(_this).attr("src") == "images/ic_address_selected.png") {
                $(_this).attr("src", "images/ic_address_normal.png");
              
                for (var a = 0; a < mypic.length; a++) {
                    $(mypic[a]).attr("src", "images/ic_address_normal.png");
                }
            } else {
                $(_this).attr("src", "images/ic_address_selected.png");
                for (var a = 0; a < mypic.length; a++) {
                    $(mypic[a]).attr("src", "images/ic_address_selected.png");
                }
            }
            calculate();

        }
        function pay() {

            var mypic = $(".middle_left").children("img");
            for (var a = 0;a < mypic.length; a++) {
                if ($(mypic[a]).attr("src") != "images/ic_address_selected.png") {
                    var p_id = $(mypic[a]).attr("data-id");
                    setck(p_id, "-", "9999", 0, "0", "1");
                }
            }
            window.location.href = "SubmitPay.aspx";
        }
        /*计算选中区域商品价格*/
        function calculate() {
            var mypic = $(".middle_left").children("img");
            var sumPric = 0;

            $.each(mypic, function () {
                if ($(this).attr("src") == "images/ic_address_selected.png") {
                    var p_id = $(this).attr("data-id");
                    var money = $(this).attr("data-money");
                    var num = $("#text_box_" + p_id).val();
            
                    var _summoney = (Number(num) * Number(money)).toFixed(2);
                    sumPric += Number(_summoney)
                    $("#sumpric_" + p_id).html(_summoney)
                }
            });
            $("#zhifu_price").html(sumPric.toFixed(2))

        }

        //选中取消
        function danxuan(str) {
            var mysrc = $(str).children("img").attr("src");//获取SRC
            if (mysrc == "images/ic_address_selected.png") {
                //当前为[选中],改变为[未选中状态]
                //未选中
                $(str).children("img").attr("src", "images/ic_address_normal.png");
                $(".pic").attr("src", "images/ic_address_normal.png");
            } else {
                //当前为[未选中状态],改变为[选中]
                //选中
                $(str).children("img").attr("src", "images/ic_address_selected.png");
            }
            var mypic = $(".middle_left").children("img");
            var arr = [];
            $.each(mypic, function () {
                if ($(this).attr("src") == "images/ic_address_selected.png") {
                    arr.push($(this).attr("src"));
                }
            });
            if (arr.length == mypic.length) {
                $(".pic").attr("src", "images/ic_address_selected.png");
            }
            if (arr.length==0) {
                $(".footer_bottom").hide();
            } else {
                $(".footer_bottom").show();
            }
            calculate();
        }
        function index_changenum(p_id, art, price) {
            GoodsNumber(p_id, function (nums) {
                var num = $("#text_box_" + p_id).val();
                var old_number = num;
                if (art == "+") {
                    num++;
                    if (num > nums) {
                        alert("库存不足");

                    } else {
                        $("#text_box_" + p_id).val(num);
                    }

                } else {
                    num--;
                    if (num <= 0) {
                        var ti = 0;
                        num = 0;
                        $("#text_box_" + p_id).val(0);
                        $("#pric_" + p_id).hide();
                        var number = $(".number");
                        for (var i = 0; i < number.length; i++) {
                            if ($(number[i]).val() != "0") {
                                ti++;
                            }
                        }
                        if (ti == 0) {
                            $("#msg").show();
                            $(".footer_bottom").hide();
                        }


                    } else {

                        $("#text_box_" + p_id).val(num);
                    }

                }
                /*cokey加入方法*/
               
                setck(p_id, art, nums, num, price, old_number);
                /**/
                calculate()
            })
        }
    </script>
</body>
</html>
